<template>
	<div class="front_resource_detail">
		<div class="resource_preview">1111</div>
		<div class="resource_right">
			<div class="head">
				<ul>
					<li :class="{ active: active === '1' }" @click="handleClickTab('1')">简介</li>
					<li :class="{ active: active === '2' }" @click="handleClickTab('2')">评论</li>
				</ul>
				<el-button type="text" size="medium" v-if="active === '2'" @click="handleOpenDialog">我要评价</el-button>
			</div>
			<template v-if="active === '1'">
				<div class="intro">
					<h4>{{ resDetail.kcName }}</h4>
					<h2>{{ resDetail.zjName }}</h2>
					<div class="info">
						<span>{{ resDetail.createName }}</span>
						<span v-if="resDetail.nature === '1'">公开</span>
						<span v-if="resDetail.nature === '2'">私有</span>
						<span>{{ resDetail.createTime }}</span>
						<span class="el-icon-view">{{ resDetail.browseCount }}</span>
					</div>
					<div class="des" v-html-descript="resDetail.content"></div>
					<div class="hand">
						<div style="flex: 1">
							<el-dropdown size="medium" trigger="click" placement="bottom-start">
								<span class="el-icon-collection">收藏</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item>黄金糕</el-dropdown-item>
									<el-dropdown-item>狮子头</el-dropdown-item>
									<el-dropdown-item>螺蛳粉</el-dropdown-item>
									<el-dropdown-item>双皮奶</el-dropdown-item>
									<el-dropdown-item>蚵仔煎</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
						<el-button type="primary" size="small" icon="el-icon-download">下载</el-button>
					</div>
				</div>
				<div class="newest"><h3>最新资源</h3></div>
			</template>
			<template v-if="active === '2'">
				<resource-comment class="comment"></resource-comment>
			</template>
		</div>
		<el-dialog title="评价资源" :visible.sync="commentDialog" width="640px">
			<el-form class="comment_form" ref="commentForm" :model="commentForm" :rules="commentRules" label-width="60px">
				<el-form-item label="评分" prop="resource">
					<el-rate v-model="commentForm.resource" :colors="commentColors" text-color="#f90" allow-half show-score score-template="{value}分"></el-rate>
				</el-form-item>
				<el-form-item label="内容" prop="content"><el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8 }" v-model="commentForm.content"></el-input></el-form-item>
			</el-form>
			<template slot="footer">
				<el-button size="medium" @click="commentDialog = false">取 消</el-button>
				<el-button size="medium" type="primary" @click="handleSubmitComment">确 定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import resourceComment from './comment';
import { getResourceDetail } from '@/api/openApi';
export default {
	components: { resourceComment },
	data() {
		return {
			active: '1',
			resDetail: {},
			commentForm: {},
			commentRules: {
				content: { required: true, message: '请输入活动名称', trigger: 'blur' }
			},
			commentDialog: false,
			commentColors: ['#99A9BF', '#F7BA2A', '#f90']
		};
	},
	computed: {
		resId() {
			return this.$route.params.id;
		}
	},
	watch: {
		resId: {
			handler(val) {
				this.getResourceDetail(val);
			},
			immediate: true
		}
	},
	methods: {
		//获取资源详情
		async getResourceDetail(val) {
			this.$fullLoading();
			let result = await getResourceDetail(val).then((res) => res.data);
			if (result.code === '0') {
				this.resDetail = !result.data ? {} : result.data[0];
			}
		},

		//评价
		handleOpenDialog() {
			this.commentDialog = true;
		},

		//提交评价
		handleSubmitComment() {
			this.$refs['commentForm'].validate((vail) => {
				if (!vail) return false;
				this.requestComment();
			});
		},

		//评价请求
		async requestComment() {
			let params = { ...this.commentForm };
			let result = await console.log(params);
		},

		//切换
		handleClickTab(val) {
			this.active = val;
		}
	}
};
</script>

<style lang="scss" scoped>
.front_resource_detail {
	display: flex;
	height: calc(100vh - 100px);
}
.resource_preview {
	flex: 1;
}
.resource_right {
	display: flex;
	flex-direction: column;
	width: 20%;
	min-width: 360px;
	background-color: #fff;
	border-left: solid 1px #dcdfe6;
	.head {
		display: flex;
		justify-content: space-between;
		height: 36px;
		flex-shrink: 0;
		position: relative;
		padding-right: 10px;
		&::after {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 0;
			content: '';
			overflow: hidden;
			border-bottom: solid 1px #dcdfe6;
		}
		ul {
			display: flex;
			line-height: 36px;
			position: relative;
			z-index: 2;
		}
		li {
			padding: 0 15px;
			cursor: pointer;
			user-select: none;
			&.active {
				color: var(--primary-active);
				font-weight: bold;
				border-bottom: solid 2px var(--primary-active);
			}
		}
	}
	.intro {
		padding: 15px;
		h4 {
			font-size: 14px;
			font-weight: normal;
			margin-bottom: 6px;
		}
		h2 {
			font-size: 24px;
			line-height: 36px;
			font-weight: normal;
		}
		.info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 10px;
			color: #909399;
			span::before {
				margin-right: 6px;
			}
		}
		.des {
			color: #606266;
			padding: 15px 0;
			line-height: 24px;
		}
		.hand {
			display: flex;
			align-items: center;
			height: 32px;
			background-color: #e9e9eb;
		}
	}
	.newest {
		padding: 15px;
		h3 {
			font-size: 14px;
		}
	}
	.comment {
		flex: 1;
	}
}
.comment_form ::v-deep {
	flex: 1;
	margin-right: 20px;
	.el-rate {
		margin-top: 10px;
	}
	.el-textarea__inner {
		resize: none;
	}
}
</style>
